<template>
    <div class="menu-container">
        <el-row>
            <el-col :span="8">
                <div id="menu-content" style="text-align: right;">
                    <el-scrollbar
                        wrap-class="side-bar-scrollbar-wrap"
                        view-class="side-bar-scrollbar-view"
                    >
                        <el-tree
                            :data="menuList"
                            default-expand-all
                            node-key="id"
                            ref="tree"
                            highlight-current
                            @node-click="getInitData"
                            :expand-on-click-node="false"
                            :props="defaultPropsTree"
                        >
                            <span slot-scope="{ node, data }">
                                <span class="el-tree-node__label" style="padding-left: 4px;">
                                    <span :title="node.label">{{node.label}} - {{data.menuSort}}</span>
                                    <span class="menuIcon">
                                        <i
                                            class="el-icon-plus"
                                            title="添加菜单"
                                            @click="addMenu(node, data)"
                                        ></i>
                                        <i
                                            class="el-icon-edit"
                                            title="编辑菜单"
                                            @click="editMenu(node, data)"
                                        ></i>
                                        <i
                                            class="el-icon-delete"
                                            title="删除菜单"
                                            @click="deleteMenu(node, data)"
                                        ></i>
                                    </span>
                                </span>
                            </span>
                        </el-tree>
                    </el-scrollbar>
                </div>
            </el-col>
            <el-col :span="16" v-if="ruleTableflag" id="grid-content" style="padding-left: 16px;">
                <el-scrollbar wrap-class="side-bar-scrollbar-wrap" class="noBack">
                    <el-table
                        stripe
                        class="heard-bg"
                        :data="tableData"
                        width="100%"
                        ref="multiple"
                        border
                        @selection-change="handleSelectChange"
                    >
                        <el-table-column width="55" type="selection"></el-table-column>
                        <el-table-column label="规则名称" prop="label"></el-table-column>
                        <el-table-column label="规则编号" prop="code"></el-table-column>
                    </el-table>
                    <el-button
                        type="primary"
                        size="small"
                        style="float:right;margin-top: 20px;margin-right: 16px;"
                        @click="handlewherherOrbind"
                    >保存</el-button>
                </el-scrollbar>
            </el-col>
        </el-row>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
        >
            <div slot="title">{{EditTitle}}</div>
            <el-form
                ref="form"
                class="menu-setting"
                size="small"
                :model="form"
                :rules="rules"
                label-width="120px"
            >
                <el-form-item label="菜单类型" prop="category">
                    <el-select v-model="form.category" disabled style="width: 100%;" clearable>
                        <el-option label="模块菜单" value="1"></el-option>
                        <el-option label="业务菜单" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用" prop="isUsable">
                    <el-select v-model="form.isUsable" style="width: 100%;" clearable>
                        <el-option label="停用" value="0"></el-option>
                        <el-option label="启用" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否可见" prop="isVisible">
                    <el-select v-model="form.isVisible" style="width: 100%;" clearable>
                        <el-option label="不可见" value="0"></el-option>
                        <el-option label="可见" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="form.menuName" />
                </el-form-item>
                <!-- <el-form-item label="菜单路径" prop="menuLink">
                <el-input v-model="form.menuLink"/>
                </el-form-item>-->
                <el-form-item label="菜单图标" v-if="form.parentSid === 0 ? true : false">
                    <el-input v-model="form.menuIcon" />
                </el-form-item>
                <el-form-item label="上级菜单" v-if="flag">
                    <select-tree
                        v-model="form.parentSid"
                        :disabled="flag"
                        :options="menuList"
                        :props="defaultProps"
                    ></select-tree>
                </el-form-item>
                <el-form-item label="序号" prop="menuSort">
                    <el-input type="number" v-model="form.menuSort" />
                </el-form-item>
                <el-form-item label="路由名称" prop="routerName">
                    <el-input v-model="form.routerName" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="Show = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import SelectTree from '@/components/SelectTree/SelectTree.vue';
import { getToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'templateMenu',
    data() {
        const validatemenuSort = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入序号'));
            } else {
                if (value.toString().length > 6) {
                    callback(new Error('字符最大长度为6'));
                }
                callback();
            }
        };
        return {
            menuList: [],
            selections: [],
            tableData: [],
            Show: false,
            EditTitle: '添加菜单',
            flag: true,
            ruleTableflag: false,
            form: {
                category: '1',
                isUsable: '1',
                isVisible: '1',
                menuName: '',
                menuIcon: '',
                parentSid: '',
                menuSort: '',
                // menuLink: '',
                routerName: '',
            },
            rules: {
                category: [
                    { required: true, message: '请选择菜单类型', trigger: 'change' },
                ],
                isUsable: [
                    { required: true, message: '请选择是否启用', trigger: 'change' },
                ],
                isVisible: [
                    { required: true, message: '请选择是否可见', trigger: 'change' },
                ],
                menuName: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                parentSid: [
                    { required: true, message: '请输入菜单所属父id', trigger: 'change' },
                ],
                menuSort: [
                    { required: true, message: '菜单排序id只能输入数字', trigger: 'blur' },
                    { validator: validatemenuSort, trigger: 'blur' },
                ],
                // menuLink: [
                //   { required: true, message: '请输入菜单路径', trigger: 'blur' },
                // ],
                routerName: [
                    { required: true, message: '请输入路由名称', trigger: 'blur' },
                    { max: 50, message: '字符最大长度为50', trigger: 'blur' },
                ],
            },
            defaultPropsTree: {
                label: 'menuName',
                children: 'child',
            },
            defaultProps: {
                parent: 'pid',
                value: 'id',
                label: 'menuName',
                children: 'child',
            },
            rowObj: {},
        };
    },
    created() {
        this.getMenuInfo();
    },
    methods: {
        getDictDetailIdsByMenuId() {
            this.$post.nebulaApi
                .getDictDetailIdsByMenuId({ menuId: this.rowObj.id })
                .then((res) => {
                    if (res.data.success) {
                        const _this = this;
                        this.$nextTick(() => {
                            this.tableData.forEach((row) => {
                                if (res.data.content.indexOf(row.id) >= 0) {
                                    _this.$refs.multiple.toggleRowSelection(row, true);
                                }
                            });
                        });
                    }
                });
        },
        handleSelectChange(val) {
            const arr = [];
            val.forEach((item) => {
                arr.push(item.id);
            });
            this.selections = arr;
        },
        // 获取规则列表
        getInitData(row) {
            this.rowObj = row;
            const params = {
                dictValue: 'VALIDRULE',
                lesseeCode: getTokenHsbankNo('HsbankNo'),
            };
            if (row.category === '2') {
                this.ruleTableflag = true;
            } else {
                this.ruleTableflag = false;
                return;
            }
            this.$post.dictDetail.getDictDetail(params).then((res) => {
                if (res.data.success) {
                    this.tableData = res.data.content.dictDetailList;
                    this.$nextTick(() => {
                        this.getDictDetailIdsByMenuId();
                    });
                }
            });
        },
        // 用户点击确定按钮
        handlewherherOrbind() {
            const params = {
                id: this.rowObj.id,
                ids: this.selections,
            };
            this.$post.nebulaApi.menuRule(params).then((res) => {
                if (res.data.success) {
                    this.$message.success('操作成功！');
                } else {
                    this.$message.error('操作失败！');
                }
            });
        },
        addMenu(node, data) {
            this.EditTitle = '添加菜单';
            this.form = {};
            this.form.isUsable = '1';
            this.form.isVisible = '1';
            this.form.parentSid = data.id;
            this.form.category = '1';
            this.flag = true;
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.form.resetFields();
                });
            }
        },
        editMenu(node, data) {
            this.EditTitle = '编辑菜单';
            this.form = JSON.parse(JSON.stringify(data));
            this.flag = true;
            if (data.parentSid === 0) {
                // 编辑一级菜单时，上级菜单也不展示
                this.flag = false;
            }
            this.Show = true;
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.form.resetFields();
                });
            }
        },
        deleteMenu(node, data) {
            this.$confirm('确认删除该菜单及其下的子菜单？', '提示', {
                customClass: 'warning', type: 'warning',
            })
                .then(() => {
                    this.$post.nebulaApi.deleteMenu({ id: data.id }).then(
                        (res) => {
                            if (res.data.success) {
                                this.$message.success(res.data.content);
                                this.getMenuInfo();
                            } else {
                                this.$message.error(err.msg);
                            }
                        },
                        (err) => {
                            this.$message.error(err.msg);
                        },
                    );
                })
                .catch(() => { });
        },
        getMenuInfo() {
            const param = { menuName: '模板菜单' };
            this.$post.nebulaApi.searchTemplateMenus(param).then((res) => {
                this.menuList = res.data.content.child;
            }, (err) => {
                this.$message.error(err);
            });
        },
        submitEdit() {
            if (this.form.id) {
                // 编辑
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$post.nebulaApi.updateMenu(this.form).then(
                            (res) => {
                                if (res.data.success) {
                                    this.getMenuInfo();
                                    this.Show = false;
                                    this.$message.success(res.data.content);
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            },
                            (err) => {
                                this.$message.error(err.message);
                            },
                        );
                    } else {
                        return false;
                    }
                });
            } else {
                // 添加
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$post.nebulaApi.addMenu(this.form).then((res) => {
                            if (res.data.success) {
                                this.$message.success(res.data.content);
                                this.getMenuInfo();
                                this.Show = false;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                    } else {
                        return false;
                    }
                });
            }
        },
    },
    components: {
        SelectTree,
    },
};
</script>

<style lang='scss'>
/* #menu-content /deep/ .side-bar-scrollbar-wrap,
#grid-content /deep/ .side-bar-scrollbar-wrap {
    max-height: 700px;
    min-height: 700px;
    height: 100%;
} */

.menu-container,
.el-col-8,
.bg-purple-dark,
.el-scrollbar {
    height: 100%;
}
.app-main-container .app-main {
    // background: #fff;
    .menu-container {
        background: #fff;
        padding: 20px;
        .el-scrollbar,
        .el-tree {
            height: 100%;
        }
    }
    .bg-purple-dark > div {
        height: 100%;
    }
    .el-tree-node__content:hover {
        background-color: #ecf5ff !important;
    }
}
#menu-content /deep/ .side-bar-scrollbar-wrap,
#grid-content /deep/ .side-bar-scrollbar-wrap {
    max-height: 700px;
    min-height: 700px;
}
.menu-container,
.el-col-8,
.bg-purple-dark,
.el-scrollbar {
    height: 100%;
}
.bg-purple-dark > div {
    height: 100%;
}
.el-tree-node__content:hover {
    background-color: #ecf5ff !important;
}

.noBack {
    background: transparent !important;
}
.menuIcon {
    position: absolute;
    right: 6%;
    display: none;
    background: #f5f7fa;
    i {
        color: #409eff;
        font-size: 16px;
    }
    .el-icon-edit {
        margin: 0 4px;
    }
}
.el-tree-node__content:hover .menuIcon {
    display: inline-block;
}
</style>
